Day 7 — 網站流程圖
目標：今天的核心任務是繪製整個小遊戲網站的流程圖 (Flow Chart)，從首頁到遊戲開始再到結算畫面，全面梳理使用者在網站中的操作路徑。透過流程圖，可以在正式撰寫程式碼前就看清網站的結構與邏輯，避免開發時出現流程錯亂或功能遺漏的情況。

1. 為何需要流程圖
   在正式開發前先繪製流程圖的好處：
   明確網站架構：將所有頁面與跳轉邏輯以圖示呈現，一目了然。
   提前發現問題：在開發前檢查流程是否有缺口或過於複雜的部分。
   團隊溝通方便：若有組員或日後維護者，可以快速了解整體流程，不必重新研究程式碼。
   視覺化規劃：幫助安排頁面之間的互動、連結與回到首頁的方式。

2. 網站基本架構
   根據目前的遊戲規劃，網站主要包含以下三個核心頁面：
   1.首頁 (Home Page)
   內容：遊戲標題、簡短介紹、開始遊戲按鈕。
   功能：提供玩家進入遊戲的入口，可附上規則說明或遊戲簡介。

2.遊戲頁面 (Game Page)
內容：實際的遊戲介面，例如翻牌區域、迷宮畫面或跑酷場景。
功能：玩家在此進行遊戲操作，包含分數、計時器、重新開始按鈕。

3.結算頁面 (Result Page)
內容：顯示玩家最終分數或結果，並提供重新遊玩或返回首頁的選項。
功能：玩家可在此看到遊戲成績，選擇再次挑戰或結束遊戲。

3. 流程圖設計概念
   以下為網站的主要使用流程（以箭頭表示頁面跳轉）：

[首頁 Home] 
   ↓（點擊「開始遊戲」按鈕）
[遊戲頁面 Game]
   ↓（遊戲結束後自動跳轉或玩家點擊「結算」）
[結算頁面 Result]
   ↙︎                ↘︎
（點擊「再玩一次」）   （點擊「回首頁」）
   ↓                   ↓
[遊戲頁面]         [首頁 Home]

流程特色：
使用者從首頁開始，清楚了解遊戲內容與進入方式。
遊戲結束後自動進入結算頁面，避免玩家迷路。
結算頁面提供 兩個選擇：
「再玩一次」：直接回到遊戲頁面，快速重新挑戰。
「回首頁」：返回首頁，方便更換遊戲模式或離開。

4. 紙筆繪製技巧
   繪製流程圖時可遵循以下步驟與技巧：
5. 工具準備：紙張、鉛筆、橡皮擦，或使用色筆加強重點。
6. 頁面框架：用方框代表每個主要頁面（首頁、遊戲、結算）。
7. 箭頭連結：用箭頭標示頁面之間的跳轉方向，並在箭頭旁標註操作條件（例如「點擊開始」、「遊戲結束自動跳轉」）。
8. 操作標註：在每個框內寫下主要功能，如「顯示分數」、「計時器」等。
9. 分支選項：對於結算頁面，要清楚標註「再玩一次」與「回首頁」兩個選擇的分支。

小技巧：可以使用不同顏色的筆區分「頁面」與「操作條件」，若日後計畫增加更多功能（如排行榜、設定頁），可以預留空間在圖上標註延伸可能。

5. 範例文字描述版流程圖

若沒有圖示，也可以用文字表示流程，例如：

Step 1：首頁 (Home)
使用者進入網站後，看到遊戲名稱、玩法簡介以及「開始遊戲」按鈕。
➡ 點擊「開始遊戲」 → 進入遊戲頁面。
Step 2：遊戲頁面 (Game)
顯示遊戲介面與操作區域，例如翻牌區、迷宮地圖或跑酷場景。
➡ 遊戲結束 → 自動進入結算頁面。
Step 3：結算頁面 (Result)
顯示分數或成績，提供兩個按鈕：
「再玩一次」 → 回到遊戲頁面重新開始。
「回首頁」 → 返回首頁結束或重新選擇。

6. 延伸思考
   1.新增功能的彈性
   是否未來需要「排行榜頁面」來顯示最高分？
   是否增加「設定頁」提供音效開關或難度調整？
   若加入登入系統，流程會增加「登入→首頁→遊戲」的步驟。

2.使用者體驗(UX)
按鈕位置需直覺，避免玩家找不到返回首頁的方式。
流程應盡量精簡，減少多餘頁面以提升遊玩流暢度。